在我們建立PIXI.Application之後

let app = new PIXI.Application({width: 256, height: 256,backgroundColor: 0x1099bb});
document.body.appendChild(app.view);

pixi會有幾個成員

• renderer
  分為canvasRender和webGLRender，用於渲染畫面和resize畫面

//更新畫面顏色
app.renderer.backgroundColor = 0x061639;
// 更新畫布尺寸
app.renderer.autoResize = true;
app.renderer.resize(800, 600);
// 滿版畫面
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

• stage
  屬於PIXI.Container
  stage是最底層的Container，額外可以任一增加Container，並且可以設定深度

setChildIndex(child, index); //設定物件深度

Container是一個容器，我覺得稱它為群組更容易理解，就把想要湊成同一個群組的東西塞在同一個Container，可設定位置、透明度等，Container預設不能互動，打開設定後可以偵聽事件

let container = new PIXI.Container();
container.addChild(sprite);
const sprite = new PIXI.Sprite(texture);
sprite.interactive = true; //設定為可互動

// 監聽事件
sprite.on('tap', (event) => {
   //handle event
});

// 改變屬性
sprite.rotation = 90 * (Math.PI / 180);

• ticker
  用於更新畫面，像是setInterval、requestAnimationFrame這樣的東西

app.ticker.add(function (delta) {
    // 動來動去
  });

範例: 因為不能上傳gif 放棄人森 直接貼程式碼囧

    let app = new PIXI.Application({width: 256, height: 256,backgroundColor: 0x1099bb});
        document.body.appendChild(app.view);

        // 載入圖片
        var sprite = PIXI.Sprite.fromImage('cat.png')
        // 設定容器
        let container =  new PIXI.Container();

        container.addChild(sprite);
        app.stage.addChild(container);   

        // 設定軸心
        sprite.anchor.set(0.5,0.5);

        container.x = app.screen.width / 2;
        container.y = app.screen.height / 2;

        // 設定為可互動
        container.interactive = true;
        // pointer: cursor
        container.buttonMode = true;


        // 監聽事件
        container.on('pointerdown', function(){
            container.scale.x *= 1.25;
            container.scale.y *= 1.25;
        });
        // 旋轉
        app.ticker.add(function(delta) {
            container.rotation -= 0.01 * delta;
        });